<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ $t('message.cdglpz') }}</div>
    <el-form
      ref="form"
      :rules="rules"
      class="doumee-form"
      :model="param"
      label-width="auto"
      label-suffix="："
    >
      <el-form-item :label="$t('message.xzcq')" prop="cq">
        <el-select
          v-model="param.cq"
          value-key="id"
          style="width: 100%"
          :placeholder="$t('message.xzcq')"
          @change="changeCq"
        >
          <el-option
            v-for="item in areaListData"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.xzcd')" prop="cd">
        <el-select
          v-model="param.cd"
          value-key="id"
          :placeholder="$t('message.xzcd')"
          style="width: 100%"
          :disabled="param.cq ? false : true"
          @change="changeCd"
        >
          <el-option
            v-for="item in spaceListData"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.kglcd')" prop="glcd">
        <el-checkbox-group v-model="param.glcd" :max="2" style="width: 100%">
          <el-checkbox
            v-for="item in glListData"
            :key="item.id"
            :label="item.id"
          >{{ item.siteName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          @click="onSubmit()"
        >{{ $t('message.tj') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { getList } from '@/api/table'
import { getAreaList, spaceList, getAreaCanBindSiteList, bindSiteAndSite } from '@/api'
export default {
  name: 'VenueOptionAdd',
  data() {
    return {
      meta: [],
      venueId: sessionStorage.getItem('venueId'),
      param: {
        glcd: []
      },
      areaListData: [],
      spaceListData: [],
      glListData: [],
      rules: {
        cq: [{ required: true, message: this.$t('message.qxz') + this.$t('message.cq'), trigger: 'change' }],
        cd: [{ required: true, message: this.$t('message.qxz') + this.$t('message.cd'), trigger: 'change' }],
        glcd: [{ required: true, message: this.$t('message.qxz') + this.$t('message.glcd'), trigger: 'change' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.toGetAreaList()
  },
  methods: {
    toGetAreaList() {
      const { venueId } = this
      getAreaList({ param: { venueId }}).then(res => {
        for (let i = 0; i < res.recordList.length; i++) {
          if (res.recordList[i].projectNames) {
            res.recordList[i].projectNamesArr = res.recordList[i].projectNames.split('/')
          } else {
            res.recordList[i].projectNamesArr = []
          }
        }
        this.areaListData = res.recordList
      })
    },
    changeCq() {
      this.$set(this.param, 'cd', '')
      this.$set(this.param, 'glcd', [])
      this.glListData = []
      this.getSpaceList()
    },
    changeCd() {
      if (this.param.cd) {
        this.$set(this.param, 'glcd', [])
        this.areaCanBindSiteList()
      }
    },
    // 获取某场区场地列表
    getSpaceList() {
      const { param } = this
      spaceList({ param: { id: param.cq }}).then(res => {
        this.spaceListData = res.recordList
      })
    },
    // 获取关联场地
    areaCanBindSiteList() {
      const { param } = this
      getAreaCanBindSiteList({ param: { id: param.cd }}).then(res => {
        this.glListData = res.recordList
      })
    },
    onSubmit() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const param = {}
          param.siteId = that.param.cd
          param.siteAId = that.param.glcd[0] || ''
          param.siteBId = that.param.glcd[1] || ''
          bindSiteAndSite({
            param
          }).then(res => {
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.pzcg'))
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
